import React, { Component } from 'react';

import "../../styles/login/MyForm.css"
import img from "../../assets/img/01.webp"
import { userLogin } from "../../api/login"

class MyForm extends Component {
    constructor(props) {
        super(props)
        this.state = {
            phone: "",
            pass: "",
            img
        }
    }

    mychange(e) {
        this.setState({
            [e.target.name]: e.target.value
        })
    }


    myclick(e) {
        if (this.state.phone!==""&&this.state.pass!=="") {
            switch (e.target.name) {
                case "loginbtn":
                    console.log("登录");
                    userLogin({ "phone": this.state.phone, "pass": this.state.pass }).then(
                        (res) => {
                            console.log(res);
                            if (res.data.code === 200) {
                                localStorage.setItem("token", res.data.token)
                            } else {
                                alert("登陆失败")
                            }
                        })
                    break;
                case "registbtn":
                    console.log("注册");
                    break;
                default:
                    break;
            }
        }else{
            alert("请输入账号&密码")
        }

    }



    render() {
        // console.log(this.state);
        return (
            <div className='form'>
                <div className='pic'>
                    <img src={this.state.img} alt="" />
                </div>
                <div className='username'>
                    <input name='phone' type="text" placeholder='请输入用户名' value={this.state.phone} onChange={(e) => { this.mychange(e) }} />
                </div>
                <div className='pass'>
                    <input name='pass' type="password" placeholder='请输入密码' value={this.state.pass} onChange={(e) => { this.mychange(e) }} />
                </div>
                <div className='loginbtn'>
                    <input name='loginbtn' type="button" placeholder='登录' onClick={(e) => { this.myclick(e) }} value="登录" />
                </div>
                <div className='registbtn'>
                    <input name='registbtn' type="button" placeholder='注册' onClick={(e) => { this.myclick(e) }} value="注册" />
                </div>
            </div>
        );
    }
}

export default MyForm;